<template>
    <div v-if="showRedesign" class="global-language-selector">
        <div class="mdc-layout-grid">
            <el-row :gutter="10" justify="space-between" class="flex-align-items-center">
                <el-col :xs="22" :sm="22" :md="12">
                    <p class="global-language-selector-title caption-white">
                        Select another country or region to view content specific to your
                        location.
                    </p>
                </el-col>
                <el-col class="hidden-sm-and-down" :md="12">
                    <div class="global-language-oper">
                        <country-select />
                        <div class="global-language-buttons margin-left24">
                            <a class="global-language-button margin-right24">Continue</a>
                        </div>
                        <div class="global-language-selector-close" @click="closeSelector">
                            <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                viewBox="0 0 16 16">
                                <g id="Close_-_16" data-name="Close - 16">
                                    <path
                                        d="M14.85,14.15a.48.48,0,0,1,0,.7.48.48,0,0,1-.7,0L8,8.71,1.85,14.85a.48.48,0,0,1-.7,0,.48.48,0,0,1,0-.7L7.29,8,1.15,1.85a.48.48,0,0,1,0-.7.48.48,0,0,1,.7,0L8,7.29l6.15-6.14a.48.48,0,0,1,.7,0,.48.48,0,0,1,0,.7L8.71,8Z">
                                    </path>
                                </g>
                            </svg>
                        </div>
                    </div>
                </el-col>
                <el-col class="hidden-md-and-up" :xs="2" :sm="2" :md="2">
                    <div class="global-language-selector-close" @click="closeSelector">
                        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            viewBox="0 0 16 16">
                            <g id="Close_-_16" data-name="Close - 16">
                                <path
                                    d="M14.85,14.15a.48.48,0,0,1,0,.7.48.48,0,0,1-.7,0L8,8.71,1.85,14.85a.48.48,0,0,1-.7,0,.48.48,0,0,1,0-.7L7.29,8,1.15,1.85a.48.48,0,0,1,0-.7.48.48,0,0,1,.7,0L8,7.29l6.15-6.14a.48.48,0,0,1,.7,0,.48.48,0,0,1,0,.7L8.71,8Z">
                                </path>
                            </g>
                        </svg>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="hidden-md-and-up hidden-xs600-and-down">
                <el-col :xs="20" :sm="18" :md="16" :lg="16" :xl="16">
                    <div class="global-language-oper ">
                        <country-select />
                        <div class="global-language-buttons margin-left24">
                            <a class="global-language-button">Continue</a>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="hidden-xs600-and-up">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="global-language-oper margin-top24">
                        <country-select />
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="global-language-buttons margin-top24">
                        <a class="global-language-button">Continue</a>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from "vue";
import countrySelect from './countrySelect.vue'
let showRedesign = ref(true);
function closeSelector() {
    showRedesign.value = false;
}
</script>
  
<style lang="scss" scoped>
@media (min-width: 960px) {
    .caption-white {
        font-size: 1rem;
    }
}

.flex-align-items-center {
    display: flex;
    align-items: center;
}

.hidden-xs600-and-down {
    display: block;
}

.hidden-xs600-and-up {
    display: none;
}

@media (max-width: 600px) {
    .hidden-xs600-and-down {
        display: none;
    }

    .hidden-xs600-and-up {
        display: block;
    }

    .global-language-button {
        width: 100% !important;
    }
}

.margin-left24 {
    margin-left: 24px;
}

.margin-top24 {
    margin-top: 24px;
}

.margin-right24 {
    margin-right: 24px;
}

.global-language-selector {
    background-color: #420588;
    animation: fadeIn 2s ease-in-out;
    z-index: 1002;

    .mdc-layout-grid {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 18px 24px;
        max-width: 1280px;
    }
}

.global-language-selector-title {
    color: #c7c8cf;
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.global-language-oper {
    display: flex;
    justify-content: space-between;
}

.global-language-buttons {
    display: flex;
    justify-content: center;

    .global-language-button {
        text-decoration: none;
        border-radius: 8px;
        height: 44px;
        line-height: 18px;
        padding: 13px 24px;
        display: block !important;
        width: 110px;
        font-weight: 400;
        border: 1px solid #fff;
        color: #fff;
        cursor: pointer;
        text-align: center;

        &:hover,
        &:focus {
            background: #00000000;
            color: #f4f1f8;
            border: 1px solid #f4f1f8;
            box-shadow: none;
        }

        &:active {
            background: #00000000;
            color: #c7c8cf;
            border: 1px solid #c7c8cf;
            box-shadow: none;
        }
    }
}

.global-language-selector-close {
    width: fit-content;
    cursor: pointer;
    line-height: 44px;

    svg {
        fill: #ffffff;
        width: 16px;
        height: 16px;
        overflow: hidden;
        vertical-align: middle;
    }
}

.caption-white {
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: 0;
    font-weight: 400;
}
</style>
  